<template>
  <div class="box">
    <h2>Son2 子组件-{{title}}</h2>
    <h3>{{ filterList }}</h3>
    <!-- <h4>{{ userInfo }}</h4> -->
    <h5>{{ getFirstNmae }}</h5>
    从vuex中获取的值:<label>{{ totalCount }}</label>
    <br />
    <button @click="chanageNameAsync('王五')">
      修改名字异步
    </button>
    <button @click="addCountAsync(-10)">辅助函数异步减少10</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['totalCount', 'title']),
    ...mapGetters(['filterList']),
    // 子模块的映射 mapState('模块名', ['xxx'])
    ...mapState('user', ['userInfo']),
    // 子模块的映射 mapGetters('模块名', ['xxx'])
    ...mapGetters('user', ['getFirstNmae'])
  },
  methods: {
    // mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中
    ...mapActions(['addCountAsync']),
    ...mapMutations('user', ['changeName']),
    ...mapActions('user', ['chanageNameAsync']),
    decrease (payload) {
      this.$store.commit('addCount', payload)
    }
  }
}
</script>

<style lang="css" scoped>
  .box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
  }
  h2 {
    margin-top: 10px;
  }
</style>
